<script>
import { mapStores } from 'pinia';
import { useUserStore } from '../../stores/user';
import ReviewApi from "../../api/review"

export default {
    props: ["bookId"],
    emits: ["refresh"],
    data() {
        return {
            user: {}, //用户信息
            title: "", //评论标题
            content: "" //评论内容
        }
    },
    methods: {
        async addReview() {
            try {
                let review = {
                    bookId: this.bookId,
                    title: this.title,
                    content: this.content
                };
                const api = new ReviewApi();
                let res = await api.add(review);
                if (res.code === 201) {
                    this.$myMessageBox(res.msg);
                    this.$emit("refresh");
                }
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        }
    },
    mounted() {
        this.user = this.userStore.userData;
    },
    computed: {
        ...mapStores(useUserStore)
    }
}
</script>

<template>
    <div class="review-add">
        <div>
            <span>{{ user.nickname }}</span>
        </div>
        <div>
            <p>
                <label for="title">标题：</label>
                <input type="text" id="title" v-model="title">
            </p>
            <p>
                <label for="content">内容：</label>
                <textarea id="content" cols="20" rows="5" v-model="content"></textarea>
            </p>
            <p>
                <button @click="addReview">提交</button>
            </p>
        </div>
    </div>
</template>

<style scoped>
.review-add {
    display: flex;
    justify-self: center;
    align-items: baseline;
}

.review-add div:first-of-type {
    flex: 0 1 auto;
    margin-right: 16px;
}

.review-add div:last-of-type {
    flex: 1 1 auto;
    margin-right: 16px;
}

.review-add div:last-of-type>p {
    display: flex;
    justify-content: center;
    align-items: center;
}

input,
textarea {
    width: 90%;
}
</style>